/**
 * Created by Ysssssss on 2021/5/14.
 */
import React, {forwardRef, useContext} from "react";
import CustomizeModal, {CustomizeModalContext} from "@common/presentational/CustomizeModal";
import {RightOutlined} from "@ant-design/icons";


const EmployeeBrandLogin = props => {
    const { onClick } = props
    const { hide, params } = useContext(CustomizeModalContext)
    const { data } = params
    const { brand_operator, store_operators } = data

    const handleOnClick = (id) => {
        onClick ({
            id,
            token: data.token,
        })
    }

    const storeMgtClick = () => {
        onClick ({
            id: 0,
            token: data.token,
            url: '/store-list'
        })
    }

    return (
        <div className="employee-brand-login-container">
            <div className="employee-brand-list">
                { (brand_operator.is_super_admin || brand_operator.is_admin || brand_operator.role_id) ? (
                    <div className="pd-16 flex-row-between bg-hover-f9" onClick={handleOnClick.bind(this, 0)}>
                        <div className="flex-center">
                            { brand_operator.brand_logo ? (
                                <img className="bd-rds-4" src={brand_operator.brand_logo} width={48} height={48} alt=""/>
                            ) : (
                                <div style={{width: '48px', height: '48px'}}
                                     className="bg-green flex-center ft-24 bd-rds-4"
                                >
                                    { brand_operator.brand_name.slice(0, 1) }
                                </div>
                            ) }
                            <span className="mgl-12">{ brand_operator.brand_name }</span>
                        </div>
                        <RightOutlined />
                    </div>
                ) : null }
                { (store_operators || []).map(store => (
                    <div className="pd-16 flex-row-between bg-hover-f9"
                         onClick={handleOnClick.bind(this, store.store_id)}
                         key={store.store_id}
                    >
                        <div className="flex-center">
                            <div style={{width: '48px', height: '48px'}}
                                 className="bg-green flex-center ft-24 bd-rds-4"
                            >
                                { store.store_name.slice(0, 1) }
                            </div>
                            <span className="mgl-12">{ store.store_name }</span>
                        </div>
                        <RightOutlined />
                    </div>
                )) }
                { brand_operator.is_super_admin || brand_operator.is_admin ? (
                    <div className="w-100 txc ft-16 clr-green cur-poi mgt-24" onClick={storeMgtClick}>
                        前往店铺管理
                    </div>
                ) : null }
            </div>
        </div>
    )

}

export default forwardRef((props, ref) => (
    <CustomizeModal title="请选择进入" width={460} ref={ref}>
        <EmployeeBrandLogin {...props}/>
    </CustomizeModal>
))